{% include 'admin/header.html' %}
<script type="text/javascript">
    changeTab('自习记录');
    window.onload = function () {
        var $load = $('#loading');
        $(document).ajaxStart(function () {
            $load.removeClass('hidden');
        });
        $(document).ajaxStop(function () {
            $load.addClass('hidden');
        });
        $('#years').change(function () {
            var year = $(this).val().substring(0, 4);
            $.post('/by_year', {year: year}, function (data) {
                var $stu = $('#stu');
                $stu.html('');
                $.each(data.result, function (k, v) {
                    var ht = '<option data-sid="' + v.id + '">' + v.stu_name + '</option>';
                    $stu.append(ht);
                });
            });
            var $start = $('#start');
            var $end = $('#end');
            $start.val(year + $start.val().substring(4));
            $end.val(year + $end.val().substring(4));
        });

        $('#search-re').click(function () {
            var sid = $('#stu option:selected').data('sid');
            var d = {start: $('#start').val(), end: $('#end').val()};
            if (sid > 0) {
                d['sid'] = sid;
            }
            {#console.log(d);#}
            $.post('/study/query_record', d, function (data) {
                fillData(data);
                select_(data.result.page);
            });
        });

        $('.pagination').on('click', 'li', function (e) {
            e.preventDefault();
            var page = $(this).data('page');
            var sid = $('#stu option:selected').data('sid');
            var d = {start: $('#start').val(), end: $('#end').val(), page: page};
            if (sid > 0) {
                d['sid'] = sid;
            }
            var status = $(this).attr("class");
            if (page > 0 && status !== "active") {
                {#console.log(d);#}
                $.post('/study/query_record', d, function (data) {
                    fillData(data);
                    select_(page);
                });
            }
        });

        function select_(page) {
            var lis = $('.pagination').find('li');
            $.each(lis, function (k, v) {
                var val = $(v).find('a').text();
                if (!/\W/.test(val)) {
                    if (val != page) { // 非严格比较 允许字符串和数字相等
                        $(v).removeClass('active');
                    } else {
                        $(v).addClass('active');
                    }
                }
            });
        }

        var start = {
            format: 'YYYY-MM-DD',
            isinitVal: true,
            initDate: [{DD: -5}, true],
            onClose: false, // 选择后关闭
            zIndex: 20000,
            okfun: function (date) {
                end.minDate = date.val;
            }
        };
        var end = {
            format: 'YYYY-MM-DD',
            isinitVal: true,
            initDate: [{DD: 5}, true],
            onClose: false,
            zIndex: 20000
        };
        $("#start").jeDate(start);
        $("#end").jeDate(end);
    };

    function fillData(data) {
        var $tbody = $('tbody');
        var $p_box = $('.pagination');
        $tbody.html('');
        $p_box.html('');
        $('#page-div').addClass('hidden');
        if (data.status) {
            var i = 1;
            $.each(data.result.result, function (k, v) {
                var h = '<tr>\n' +
                    '<td>' + i++ + '</td>\n' +
                    '<td>' + v.stu.stu_name + '</td>\n' +
                    '<td><span class="record-' + v.status + '"></span></td>\n' +
                    '<td>' + v.datetime + '</td>\n' +
                    '</tr>';
                $tbody.append(h);
            });
            if (data.result.pages > 1) {
                $('#page-div').removeClass('hidden');
                $p_box.append('<li data-page="1"><a href="javascript:">首页</a></li>');
                $.each(data.result.pageNums, function (i, j) {
                    $p_box.append('<li data-page="' + j + '"><a href="javascript:">' + j + '</a></li>');
                });
                $p_box.append('<li data-page="' + data.result.pages + '"><a href="javascript:">尾页</a></li>');
                $('#page-div > span').html('共' + data.result.pages + '页，' + data.result.total + '条数据');
            }
        } else {
            $tbody.html('<tr><td align="center" colspan="4">无该记录</td></tr>');
        }
    }

    function Z_Export_() {
        var sid = $('#stu option:selected').data('sid');
        var start = $('#start').val();
        var end = $('#end').val();
        window.open('/study/export?sid=' + sid + '&start=' + start +
            '&end=' + end, '_self');
    }
</script>
<div class="record-xcontent">
    <div>
        <div class="col-lg-12 col-xs-12">
            <h4><span class="fa fa-hand-o-right"></span> 自习记录</h4>
            <div style="padding: 15px 5px 0;" class="pull-right">
                <div id="loading" class="pull-left hidden" style="padding: 4px 10px;">
                    <img class="" width="20" src="/static/images/loading.jpg" alt="加载中">
                </div>
                <div style="margin-right: 4px;" class="btn-group-sm pull-left">
                    <button onclick="Z_Export_()" class="btn btn-success">导出</button>
                </div>
                <div class="input-group min-min-input pull-left">
                    <select id="years" class="form-control min-min-select">
                        {% for foo in years %}
                            <option {% if year == foo.stu_reg_time %}selected{% endif %}>
                                {{ foo.stu_reg_time }}年度
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="input-group min-min-input pull-left">
                    <input style="width: 80px;" class="form-control min-min-select" type="text" id="start" readonly>
                </div>
                <div class="input-group min-min-input pull-left">
                    <input style="width: 80px;" class="form-control min-min-select" type="text" id="end" readonly>
                </div>
                <div class="input-group min-min-input pull-left">
                    <select id="stu" class="form-control min-min-select">
                        {% for foo in stus %}
                            <option data-sid="{{ foo.id }}">{{ foo.stu_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <button id="search-re" class="btn btn-info btn-sm">搜索</button>
            </div>
        </div>
        <div>
            <div class="col-lg-12 col-xs-12">
                <table class="table table-striped">
                    <thead class="bg-color-x">
                    <tr>
                        <td>索引</td>
                        <td>学生名</td>
                        <td>状态</td>
                        <td>签到时间</td>
                    </tr>
                    </thead>
                    <tbody>
                    {% if not record_list or record_list.total <= 0 %}
                        <tr>
                            <td align="center" colspan="4"> 暂无数据</td>
                        </tr>
                    {% else %}
                        {% for a in record_list.result %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ a.stu.stu_name }}</td>
                                <td><span class="record-{{ a.status }}"></span></td>
                                <td>{{ a.datetime }}</td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 分页按钮 -->
    <div id="page-div"
         class="col-lg-12 col-xs-12 text-center {% if record_list.pages <= 1 %}hidden{% endif %}">
        <ul style="margin: 0;" class="pagination pagination-sm">
            <li data-page="1"><a href="javascript:">首页</a></li>
            {% for foo in record_list.pageNums %}
                <li data-page="{{ foo }}" class="{% if foo == record_list.page %}active{% endif %}">
                    <a href="javascript:">{{ foo }}</a>
                </li>
            {% endfor %}
            <li data-page="{{ record_list.pages }}"><a href="javascript:">尾页</a></li>
        </ul>
        <span style="padding-top: 15px; font-size: 12px;" class="pull-right">
            共{{ record_list.pages }}页，{{ record_list.total }}条数据
        </span>
    </div>
</div>

{% include 'admin/footer.html' %}